<template>
	<div>
		<el-container style="position: absolute;top: 0px;left: 0px; bottom: 0px;right: 0px; overflow: hidden;">
			<!-- 头部 -->
			<el-header>
				<h3>UNI-ADMIN</h3>
				<div class="navlist">
					<el-menu class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"
					 @select="selectMenu">
						<el-menu-item :index="index|numToString" v-for="(item,index) in firstMenu">{{item.name}}</el-menu-item>
						<el-submenu index="2">
							<template slot="title">
								<span style="color: #fff;">{{this.$store.state.userinfo.username}}</span>
							</template>
							<el-menu-item index="2-1">修改</el-menu-item>
							<el-menu-item index="2-2" @click="logout">退出</el-menu-item>
						</el-submenu>
					</el-menu>
				</div>
			</el-header>
			<el-container style="height: 100%;">
				<!-- 左侧菜单 -->
				<el-aside :width="iscollapse ? '64px' : '200px'" id="aside">
					<div class="leftMenu" @click="changeTab">|||</div>
					<el-menu default-active="2" class="el-menu-vertical-demo" background-color="#FFFFFF" text-color="#303133"
					 active-text-color="teal" :collapse="iscollapse" :collapse-transition="false" router >
						<el-menu-item :index="item.url" v-for="(item,ind) in submenu">
							<i :class="item.icon"></i>
							<span slot="title">{{item.name}}</span>
						</el-menu-item>
					</el-menu>
				</el-aside>
				<!-- 主要内容 -->
				<el-main v-loading="this.$store.state.loading" style="padding: 0;">
					<!-- 面包屑 -->
					<bread/>
					<router-view></router-view>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	// 导入左侧菜单文件
	import nav from '../../utils/menu.js'
	// 导入面包屑组件
	import bread from './home/bread.vue'
	// 导入公共组件
	import common from '../../common/mixins/index.js'
	export default {
		// 注册公共组件
		mixins:[common],
		// 组件名称
		name: 'demo',
		// 组件参数 接收来自父组件的数据
		props: [],
		// 局部注册的组件
		components: {bread},
		// 组件状态值
		data() {
			return {
				// 左侧菜单栏默认状态
				iscollapse: false,
				// 一级菜单
				firstMenu:[],
				// 二级菜单
				submenu:[],
			}
		},
		mounted() {
			// 函数调用
			this.setHeight();
		},
		// 计算属性
		computed: {},
		// 侦听器
		watch: {},
		// 组件方法
		methods: {
			// 点击切换左侧菜单
			changeTab() {
				this.iscollapse = !this.iscollapse;
			},
			// 左侧菜单自适应高度
			setHeight() {
				// 获取文档对象
				let html = document.documentElement || document.body;
				// 获取文档对象高度
				let height = html.clientHeight;
				// 获取左侧菜单对象
				let aside = document.querySelector('.el-aside');
				// 设置左侧菜单高度
				aside.style.height = height - 60 + 'px';
			},
			// 退出登录
			selectMenu(index) {
				this.submenu=this.firstMenu[index].child;
				console.log(this.submenu)
			},
			logout() {
				this.$confirm('确定退出，亲', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$axios.post('/api/logout').then(res => {
						console.log(res)
						// 清空token
						this.$store.commit('logOut');
						// 跳转至登录页
						this.$router.push('/demo/login');
					}).catch((error) => {
						// 错误捕获
						this.$message.error(error.response.data.msg);
						return false
					})
				  // 退出成功提示
					this.$message({
						type: 'success',
						message: '退出成功'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消退出'
					});
				});
			}
		},
		/**
		 * 组件实例创建完成
		 */
		created() {
			// 给一级菜单赋值
			this.firstMenu=nav;
			this.submenu=this.firstMenu[0].child;
			console.log(nav)
		},
	}
</script>

<style lang="scss" scoped>
	// 头部
	.el-header {
		width: 100%;
		background-color: #545c64;
		display: flex;
		justify-content: space-between;
		align-items: center;

		h3 {
			color: #FFFFFF;
		}

		.navlist {
			display: flex;
			align-items: center;
		}
	}

	// 左侧菜单
	.el-aside {
		background-color: #FFFFFF;
		border-right: 1px solid #CCCCCC;

		.el-menu {
			border: none;
		}

		.leftMenu {
			width: 100%;
			height: 26px;
			font-size: 14px;
			background-color: #ccc;
			color: #fff;
			text-align: center;
			line-height: 26px;
			cursor: pointer;
		}
	}
</style>
